<template>
  <n-layout has-sider class="w-full h-full">
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="260"
      :collapsed="collapsed"
      show-trigger
      @collapse="collapsed = true"
      @expand="collapsed = false"
    >
      <SidebarTopInfo :collapsed="collapsed" />

      <n-divider class="!my-20px mx-25px" style="width: calc(100% - 50px)" />

      <n-menu
        :value="menuActiveKey"
        :options="menuOptions"
        :collapsed="collapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        @update:value="handleSelectMenu"
      />

      <transition
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
      >
        <SidebarBottomInfo
          class="absolute bottom-20px w-full"
          v-if="!collapsed"
        />
      </transition>
    </n-layout-sider>

    <n-layout class="h-full">
      <n-layout-header>
        <CommonSetting />
      </n-layout-header>

      <component :is="containerComponent" />
    </n-layout>
  </n-layout>
</template>

<script setup>
import { h, ref } from "vue";
import { Cube, Sprout, Settings, Notebook, LogoGithub } from "@vicons/carbon";
import { t } from "@/language";
import { renderIcon } from "@/utils/common/render";
import SidebarTopInfo from "@/views/home/components/SidebarTopInfo.vue";
import SidebarBottomInfo from "./components/SidebarBottomInfo.vue";

import Project from "./container/Project.vue";
import AssetsCenter from "./container/AssetsCenter.vue";
import SettingCenter from "./container/SettingCenter.vue";

const collapsed = ref(false);
const menuActiveKey = ref("project");
const menuOptions = [
  {
    label: "项目",
    key: "project",
    icon: renderIcon(Cube),
    component: Project,
  },
  {
    label: "资源中心",
    key: "assets-center",
    icon: renderIcon(Sprout),
    component: AssetsCenter,
  },
  {
    label: "设置中心",
    key: "setting-center",
    icon: renderIcon(Settings),
    component: SettingCenter,
  },
  {
    key: "divider-1",
    type: "divider",
    props: {
      style: {
        margin: "20px 25px",
      },
    },
  },
  {
    label: () =>
      h(
        "a",
        {
          href: "https://github.com/mlt131220/ES-3DEditor",
          target: "_blank",
        },
        "GitHub"
      ),
    key: "github-link",
    icon: renderIcon(LogoGithub),
    isLink: true,
  },
  {
    label: () =>
      h(
        "a",
        {
          href: "http://editor-doc.astraljs.com",
          target: "_blank",
        },
        t("home.Usage Document")
      ),
    key: "usage-document",
    icon: renderIcon(Notebook),
    isLink: true,
  },
];
const containerComponent = ref(Project);

function handleSelectMenu(key, item) {
  if (item.isLink) return;

  menuActiveKey.value = key;

  // @ts-ignore
  containerComponent.value = item.component;
}
</script>

<style scoped lang="less">
.n-layout {
  &-header {
    height: var(--header-height);
    line-height: var(--header-height);
    padding: 0 0.5rem;
    display: flex;
    justify-content: end;
    align-items: center;
    box-shadow: 0 6px 16px -9px rgba(0, 0, 0, 0.08),
      0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  }
}
</style>
